import React, { Fragment, useContext, useEffect, useState, useRef } from "react";
import Slider from "react-slick";
import { tools_product_4 } from "../../../../services/script";
import { useQuery } from "@apollo/client";
import { gql } from '@apollo/client';
import CartContext from "../../../../helpers/cart";
import { CompareContext } from "../../../../helpers/Compare/CompareContext";
import { CurrencyContext } from "../../../../helpers/Currency/CurrencyContext";
import { WishlistContext } from "../../../../helpers/wishlist/WishlistContext";
import { Container, Row, Col, Button, Dropdown } from "reactstrap";
import ProductItem from "../../../../components/common/product-box/ProductBox12";

import { getProductsFilter, getProducts, addProductToCart } from "../../../../api/api";
import { getTwoDecimal } from "../../../../tools/tools";
import { fileServerUrl } from "../../../../config/index.json";
import { toast } from "react-toastify";

// const GET_PRODUCTS = gql`
//   query productByCategory($category: String!) {
//     productByCategory(category: $category) {
//       id
//       title
//       description
//       type
//       brand
//       collection
//       category
//       price
//       sale
//       discount
//       new
//       images {
//         image_id
//         id
//         alt
//         src
//       }
//       variants {
//         variant_id
//         id
//         sku
//         size
//         color
//         image_id
//       }
//     }
//   }
// `;

const FooterLink = () => {
  const context = useContext(CartContext);
  const compareContext = useContext(CompareContext);
  const curContext = useContext(CurrencyContext);
  const wishListContext = useContext(WishlistContext);
  const [yearList, setYearList] = useState([]);
  const [brandList, setBrandList] = useState([]);
  const [modelList, setModelList] = useState([]);
  const [engineList, setEngineList] = useState([]);
  const [fuelTypeList, setFuelTypeList] = useState([]);

  // const [yearDisable, setYearDisable] = useState(false);
  const [brandDisable, setBrandDisable] = useState(true);
  const [modelDisable, setModelDisable] = useState(true);
  const [engineDisable, setEngineDisable] = useState(true);
  const [fuelTypeDisable, setFuelTypeDisable] = useState(true);

  const yearInput = useRef("");
  const brandInput = useRef("");
  const modelInput = useRef("");
  const engineInput = useRef("");
  const fuelTypeInput = useRef("");

  const [pageNum, setPageNum] = useState(1);
  const [productList, setProductList] = useState([]);
  const [pageCount, setPageCount] = useState(1);
  const [searchActive, setSearchActive] = useState(false);

  // var { data } = useQuery(GET_PRODUCTS, {
  //   variables: {
  //     category: "tools",
  //   },
  // });

  const batchSetDisable = (id) => {
    if (id == 'year') {
      // setBrandDisable(true);
      setModelDisable(true);
      setEngineDisable(true);
      setFuelTypeDisable(true);
    }
    else if (id == "brand") {
      // setModelDisable(true);
      setEngineDisable(true);
      setFuelTypeDisable(true);
    }
    else if (id == "model") {
      // setEngineDisable(true);
      setFuelTypeDisable(true);
    }
  }

  const onYearOptionChange = (e) => {
    yearInput.current = e.target.value;

    setBrandDisable(false);
    brandInput.current = "";
    document.getElementById("brand").value = "defaultOption";
    modelInput.current = "";
    document.getElementById("model").value = "defaultOption";
    engineInput.current = "";
    document.getElementById("engine").value = "defaultOption";
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("year");
    var input = {
      "filterType": "brand",
      "year": e.target.value,
      "brand": "",
      "model": "",
      "engine": "",
      "fuelType": ""
    };
    getProductsFilter(input).then(res => {
      setBrandList(res.data);
    })
  }

  const onBrandOptionChange = (e) => {
    brandInput.current = e.target.value;

    setModelDisable(false);
    modelInput.current = "";
    document.getElementById("model").value = "defaultOption";
    engineInput.current = "";
    document.getElementById("engine").value = "defaultOption";
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("brand");
    var input = {
      "filterType": "model",
      "year": yearInput.current,
      "brand": e.target.value,
      "model": "",
      "engine": "",
      "fuelType": ""
    };
    getProductsFilter(input).then(res => {
      setModelList(res.data);
    })
  }

  const onModelOptionChange = (e) => {
    modelInput.current = e.target.value;

    setEngineDisable(false);
    engineInput.current = "";
    document.getElementById("engine").value = "defaultOption";
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("model");
    var input = {
      "filterType": "engine",
      "year": yearInput.current,
      "brand": brandInput.current,
      "model": e.target.value,
      "engine": "",
      "fuelType": ""
    };
    getProductsFilter(input).then(res => {
      setEngineList(res.data);
    })
  }

  const onEngineOptionChange = (e) => {
    engineInput.current = e.target.value;
    setFuelTypeDisable(false);
    fuelTypeInput.current = "";
    document.getElementById("fuelType").value = "defaultOption";
    batchSetDisable("engine");
    var input = {
      "filterType": "fuelType",
      "year": yearInput.current,
      "brand": brandInput.current,
      "model": modelInput.current,
      "engine": e.target.value,
      "fuelType": ""
    };
    getProductsFilter(input).then(res => {
      setFuelTypeList(res.data);
    })
  }

  const onFuelTypeOptionChange = (e) => {
    fuelTypeInput.current = e.target.value;
  }

  const onSearchBtnClick = () => {
    // if (searchActive) {
    getProducts({
      "year": yearInput.current,
      "brand": brandInput.current,
      "model": modelInput.current,
      "engine": engineInput.current,
      "fuelType": fuelTypeInput.current,
      "pageNum": 1,
      "pageSize": 10
    }).then(res => {
      setPageNum(1);
      setPageCount(res.page_count);
      setProductList(res.data);
    })
    // }
    // else {
    //   toast.error("Please Login To Shopping!");
    // }
  }

  const searchNextPage = () => {
    if (pageNum < pageCount)
      getProducts({
        "year": yearInput.current,
        "brand": brandInput.current,
        "model": modelInput.current,
        "engine": engineInput.current,
        "fuelType": fuelTypeInput.current,
        "pageNum": pageNum + 1,
        "pageSize": 10
      }).then(res => {
        setPageNum(pageNum + 1);
        setPageCount(res.page_count);
        setProductList(res.data);
      })
  }

  const searchLastPage = () => {
    if (pageNum > 1) {
      getProducts({
        "year": yearInput.current,
        "brand": brandInput.current,
        "model": modelInput.current,
        "engine": engineInput.current,
        "fuelType": fuelTypeInput.current,
        "pageNum": pageNum - 1,
        "pageSize": 10
      }).then(res => {
        setPageNum(pageNum - 1);
        setPageCount(res.page_count);
        setProductList(res.data);
      })
    }
  }

  const handleAddProductToCart = (dataitem) => {
    var user = localStorage.getItem("XYCLogin");
    if (user) {

      var input = {
        "product_id": dataitem.product_id,
        "quantity": "1",
        "user_guid": JSON.parse(user).user_guid
      };
      addProductToCart(input).then(res => {
        if (res.error_code == "2000") {
          toast.success(res.msg);
        }
        else {
          toast.warning(res.msg);
        }
      })
    }
    else {
      toast.error("Please Login To Shopping!")
    }
  }

  // useEffect(() => {
  //   // var user = localStorage.getItem("XYCLogin")
  //   // if (user) {
  //   setSearchActive(true);
  //   var input = {
  //     "filterType": "year",
  //     "year": "",
  //     "brand": "",
  //     "model": "",
  //     "engine": "",
  //     "fuelType": ""
  //   };
  //   getProductsFilter(input).then(res => {
  //     setYearList(res.data);
  //   });
  //   // }
  // }, [])

  return (
    <div>
      <Row>
        <Col md='4'>
          <h4 style={{ fontWeight: 700, marginTop: 100, fontSize: 22 }} className="footer-link-line-height">
            ABOUT
          </h4>
        </Col>
        <Col md='4'>
          <h4 style={{ fontWeight: 700, marginTop: 100, fontSize: 22 }} className="footer-link-line-height">
            INFORMATION
          </h4>
        </Col>
        <Col md='4'>
          <h4 style={{ fontWeight: 700, marginTop: 100, fontSize: 22 }} className="footer-link-line-height">
            CUSTOMER SERVICE
          </h4>
        </Col>
      </Row>
      <div style={{ marginTop: 20 }}>
        <Row>
          <Col md='4' className="footer-link-line-height">
            <h6>
              About Products
            </h6>
          </Col>
          <Col md='4'>
            <h6>
              Product Info
            </h6>
          </Col>
          <Col md='1'>
            <h6>
              My Order
            </h6>
          </Col>
        </Row>
        <Row>
          <Col md='4' className="footer-link-line-height">
            <h6>
              About Us
            </h6>
          </Col>
          <Col md='4'>
            <h6>
              FAQ
            </h6>
          </Col>
          <Col md='1'>
            <h6>
              Help Center
            </h6>
          </Col>
        </Row>
        <Row>
          <Col md='4' className="footer-link-line-height">
            <h6>
              FAQ
            </h6>
          </Col>
          <Col md='4'>
          </Col>
          <Col md='1'>
            <h6>
              FAQ
            </h6>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default FooterLink;
